<template>
  <div>
    <a-card class="card" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :sm="{span:12}" :lg="{span:8}" :xl="{span:6}">
              <a-form-item label="院系">
                <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="postParam.ssyxm" disabled>
                  <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{i.dwh+"-"+ i.dwmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:8}" :xl="{span:6}">
              <a-form-item label="专业">
                <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="postParam.sszym" disabled>
                  <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zyh">{{ i.zyh+"-"+i.zymc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:8}" :xl="{span:6}">
              <a-form-item label="研究方向">
                <a-select :allowClear="true" showSearch optionFilterProp="children" v-model="postParam.yjfxm" disabled>
                  <a-select-option v-for="i in selectMenu.yjfx" :key="i.id" :value="i.yjfxm">{{i.yjfxm.substring(i.yjfxm.length-2) +"-"+ i.yjfxmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :sm="{span:12}" :lg="{span:8}" :xl="{span:6}">
              <a-button type="primary" @click="loadData">查询</a-button>
              <a-button type="primary" @click="handleAddMentor">添加招生导师</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <!-- <s-table
          ref="table"
          size="default"
          rowKey="key"
          :columns="columns"
          :loading="loading"
          :alert="options.alert"
          :rowSelection="options.rowSelection"
          :data="loadData"
          :pagination="{pageSize:10}"
        >
          <template slot="action" slot-scope="text,record">
            <a @click="handleEdit(record.id)">修改</a>
            <a @click="handleDelete(record.id)">删除</a>
          </template>

          <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
        </s-table> -->

    <a-table ref="table" size="default" rowKey="key" :columns="columns" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :dataSource="data" :pagination="false" :scroll="{ y: 300 }">
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
    </a-table>

    <a-table style='margin-top:30px ;' ref="table2" size="default" rowKey="key" :columns="columns2" :dataSource="data2"
      :pagination="false" :scroll="{ y: 300 }">
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <template slot="px" slot-scope="text,record">
         <a-input placeholder="请输入..." :value="record.px" @blur="handleSave(record.ssszszymlmxId,record.px)"  @change="e => handleChange(e.target.value,record)"/>
      </template>
      <template slot="action" slot-scope="text,record">
        <a @click="handleDelete(record.ssszszymlmxId)">删除</a>
      </template>
    </a-table>
  </div>
</template>

<script>
  import moment from 'moment'
  import {STable} from '~'
  import {mapState} from 'vuex'

  const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']

  export default {
    components: {
      STable
    },
    props: {
      confirmHandleVisiable: {
        default: false
      },
      info: {
        default: () => []
      },
      // 是否禁止编辑
      disabledStop: {
        default: true
      }
    },
    data() {
      return {
        moment,
        postParam: {},
        loading: false,
        data: [],
        data2: [],
        columns: [{
            title: '序号',
            scopedSlots: {
              customRender: 'serial'
            },
            width: '16%'
          },
          {
            title: '导师编号',
            dataIndex: 'DSBH',
            width: '16%'
          },
          {
            title: '姓名',
            dataIndex: 'XM',
            width: '16%'
          },
          {
            title: '指导院系',
            dataIndex: 'SSYXM',
            width: '16%'
          },
          {
            title: '指导专业',
            dataIndex: 'SSZYM',
            width: '16%'
          },
          {
            title: '指导研究方向',
            dataIndex: 'YJFXMC',
            width: '16%'
          }
        ],
        columns2: [{
            title: '序号',
            scopedSlots: {
              customRender: 'serial'
            },
            width: '10%'
          },
          {
            title: '导师编号',
            dataIndex: 'DSBH',
            width: '20%'
          },
          {
            title: '姓名',
            dataIndex: 'XM',
            width: '10%'
          },
          {
            title: '指导研究方向',
            dataIndex: 'YJFXMC',
            width: '20%'
          },
           {
          title: '序列',
          dataIndex: 'px',
           width: '20%',
          scopedSlots: { customRender: 'px' }
         },
          {
            title: '操作',
            dataIndex: 'cz',
            width: '20%',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        selectMenu: {
          yx: [], // 院系
          zy: [], //专业
          yjfx: []
        },
        selectedRowKeys: [],
        selectedRows: [],
        options: {
          // alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            // selectedRowKeys: this.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
              this.selectedRowKeys = selectedRowKeys
              this.selectedRows = selectedRows
            },
            onSelect: (record, selected, selectedRows) => {
              console.log(record, selected, selectedRows)
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
              console.log(selected, selectedRows, changeRows)
            },
          }
        },
        pagination: {
          current: 1
        }
      }
    },
    computed: {
      ...mapState({
        systemInfo: state => state.app.systemInfo,
        TYPE0321: state => state.app['TYPE0321'], // 是否在岗
        TYPE0126: state => state.app['TYPE0126'], // 年级
        TYPE0011: state => state.app['TYPE0011'] // 性别
      })
    },
    created() {
      this.initSelectMenu()

      selectArr.forEach(v => {
        this.$store.dispatch('app/setDictionary', v)
      })
      // this.data = this.info['data']
      this.postParam = this.info
      this.data2 = this.info.mapList
      this.getProssion(this.postParam.ssyxm)
      this.getDirec(this.postParam.sszym)
    },
    watch: {
      info() {
        console.log('two', this.info)
        this.postParam = this.info
        this.data2 = this.info.mapList
        this.loadData({
          pageNum: this.pagination.current
        });
        this.getProssion(this.postParam.ssyxm)
        this.getDirec(this.postParam.sszym)

      }
    },
    methods: {
      initSelectMenu() {
        let allRequest = [
          this.$api.base.collegeAll()
        ]
        Promise.all(allRequest).then(res => {
          this.selectMenu = {
            yx: res[0].data
          }
        })
      },
      // 多选
      onSelectChange(selectedRowKeys, selectedRows) {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      yxChange(code) {
        this.form.setFieldsValue({
          'sszym': ''
        })
        this.getProssion(code)
      },
      // 获取专业
      getProssion(code) {
        // 获取专业
        console.log(code)
        this.$api.base.majorAll({
          lsdwh: code,zycc:'2'
        }).then(res => {
          this.$set(this.selectMenu, 'zy', res.data)
        })
      },
      // 获取研究方向
      getDirec(code) {
        this.$api.base.searchDirectory({
          ssyxm: this.postParam.ssyxm,
          zsxn: this.postParam.zsxn,
          sszym: code,
           xwccm: 2
        }).then(res => {
          this.$set(this.selectMenu, 'yjfx', res.data)
        })
      },
      // 关闭
      onClose() {
        // this.$emit('close')
        this.form.resetFields()
        this.getDirec(this.postParam.sszym)
      },
      // // 加载数据
      loadData(parameter = {}) {
        console.log()
        if (!this.postParam.yjfxm) {
          this.$message.warn('请先选择研究方向再查询导师')
          return;
        } else {

          var queryParam = {
            ssyxm: this.postParam.ssyxm,
            zszym: this.postParam.sszym,
            yjfx: this.postParam.yjfxm,
          }
          let params = Object.assign(queryParam, parameter)
          this.loading = true
          this.$api.base.getDirecTeachers(params).then(res => {
            const pagination = { ...this.pagination
            };
            pagination.total = 0
            if (res.data && res.data.total) {
              pagination.total = res.data.total;
            }
            this.data = []
            this.pagination = pagination;
            if (res.data && res.data.rows.length) {
              this.data = res.data.rows;
            }
            this.loading = false;
          })
        }
      },
       handleChange (value,tt) {
         this.$set(tt,'px',value)
      },
      // 分页
      handleTableChange(pagination, filters, sorter) {
        console.log(pagination);
        const pager = { ...this.pagination
        };
        pager.current = pagination.current;
        this.pagination = pager;
        this.loadData({
          pageSize: 10,
          pageNum: pagination.current
        });
      },
      // 输出数据
      GetInfo() {

        // return this.data
      },
       handleSave(key,px){
          let params =key+'/'+px
        this.$api.recruitstat.setUpBySpecialtyIncludeSave(params).then(res=>{
          this.GetSelectTeacher()
        })
      },
      // 删除
      handleDelete(key) {
        // const dataSource = [...this.data]
        // this.data = dataSource.filter(item => item.key !== key)
        this.$api.recruitstat.setUpByDirectoriesIncludeDelete(key).then(res => {
          this.GetSelectTeacher()
        })
      },
      handleAddMentor() {
        if (!this.selectedRowKeys.length) {
          this.$message.warning('请选择需要导入的教师')
          return
        }
        var newArr = []
        console.log(this.info)
        this.selectedRows.map((item, index) => {
          newArr.push({
            ssszszymlId: this.info.zsSsszszyml.id,
            yjfxm: this.postParam.yjfxm,
            dsxxId: item.ID
          })
        })
        console.log(newArr)
        // if(this.info && this.info && this.info.zsSsszszymlmxList && this.info.zsSsszszymlmxList.length){
        //    this.$api.recruitstat.setUpByDirectoriesSecondUpdate({rulestes:JSON.stringify(newArr)}).then( res => {
        //         this.GetSelectTeacher()
        //   })
        // }else{
        this.$api.recruitstat.setUpByDirectoriesSecondAdd({
          rulestes: JSON.stringify(newArr)
        }).then(res => {
          this.GetSelectTeacher()
          this.selectedRowKeys = [];
        })
        // }
        // this.$api.recruitstat.setUpByDirectoriesSecondAdd({rulestes:JSON.stringify(newArr)}).then( res => {
        //   this.GetSelectTeacher()
        // })
      },
      GetSelectTeacher() {
        if (this.info && this.info.zsSsszszyml) {
          this.$api.recruitstat.setUpByDirectoriesId(this.info.zsSsszszyml.id).then(res => {
            this.data2 = res.data.mapList
            // this.$emit('getInfoValue',res.data)
          })
        }
      }
    }
  }
</script>

<style lang="less">
  .fullscreen {
    .ant-drawer-wrapper-body {
      height: 100%;
      overflow: auto;
    }
  }
</style>
